<template>
  <div>
    <!-- <px-form ref="formRef" :inline="true" :model="formValue" :rules="rules" label-position="right" label-width="120px"> -->
    <px-row>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '任务单号不能为空', trigger: ['change', 'blur'] }]"
          label="任务单号"
          :prop="[...itemProps, 'workOrderCode']"
          label-width="120px"
        >
          <px-input v-model="formValue.workOrderCode" disabled placeholder="自动生成" maxlength="50" />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '工单主题不能为空', trigger: ['change', 'blur'] }]"
          label="工单主题"
          :prop="[...itemProps, 'workOrderName']"
          label-width="120px"
        >
          <px-input v-model="formValue.workOrderName" placeholder="主题格式：年/月/日-主题名称" maxlength="50" clearable />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item label="报修人" :prop="[...itemProps, 'createName']" label-width="120px">
          <px-input v-model="formValue.createName" disabled maxlength="50" clearable />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '优先级不能为空', trigger: ['change', 'blur'] }]"
          label="优先级"
          :prop="[...itemProps, 'weight']"
          label-width="120px"
        >
          <px-select v-model="formValue.weight" filterable placeholder="请选择优先级" clearable>
            <px-option v-for="item in shareData.faultLevelList" :key="item.id" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
      </px-col>
      <px-col :span="16">
        <px-form-item
          :rules="[{ required: true, message: '请选择维修时间', trigger: ['change', 'blur'] }]"
          label="维修时间"
          :prop="[...itemProps, 'time']"
          label-width="120px"
        >
          <px-date-picker
            v-model="formValue.time"
            value-format="YYYY-MM-DD"
            range-separator="至"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled-date="disabledStartDate"
            placeholder="请选择维修时间"
          />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '是否消防中断不能为空', trigger: ['change', 'blur'] }]"
          label="是否消防中断"
          :prop="[...itemProps, 'isStop']"
          label-width="120px"
        >
          <px-radio-group v-model="formValue.isStop">
            <px-radio :label="1">是</px-radio>
            <px-radio :label="0">否</px-radio>
          </px-radio-group>
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '是否火警隔离不能为空', trigger: ['change', 'blur'] }]"
          label="是否火警隔离"
          :prop="[...itemProps, 'isFireIsolation']"
          label-width="120px"
        >
          <px-radio-group v-model="formValue.isFireIsolation">
            <px-radio :label="1">是</px-radio>
            <px-radio :label="0">否</px-radio>
          </px-radio-group>
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '执行人不能为空', trigger: ['change', 'blur'] }]"
          label="执行人"
          :prop="[...itemProps, 'executorInfoList']"
          label-width="120px"
        >
          <px-select-v2
            v-model="formValue.executorInfoList"
            multiple
            filterable
            clearable
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="1"
            :reserve-keyword="false"
            :options="approvalList"
            placeholder="请选择执行人"
            @change="executorIdChange"
          />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '审核人不能为空', trigger: ['change', 'blur'] }]"
          label="审核人"
          :prop="[...itemProps, 'approverId']"
          label-width="120px"
        >
          <px-select-v2
            v-model="formValue.approverId"
            filterable
            clearable
            :options="customApprovalList"
            placeholder="请选择审核人"
            @change="approvalIdChange"
          />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item label="工单发起方式" :prop="[...itemProps, 'createMode']" label-width="120px">
          <px-input v-model="formValue.createMode" disabled maxlength="50" clearable />
        </px-form-item>
      </px-col>
    </px-row>
    <px-row>
      <px-col :span="8">
        <px-form-item
          :rules="[{ required: true, message: '故障设备不能为空', trigger: ['change', 'blur'] }]"
          label="故障设备"
          :prop="[...itemProps, 'eqpName']"
          label-width="120px"
        >
          <px-input v-model="formValue.eqpName" disabled placeholder="根据所选故障设备获取" />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item label="所处地块" :prop="[...itemProps, 'eqpFacCodeDesc']" label-width="120px">
          <px-input v-model="formValue.eqpFacCodeDesc" disabled placeholder="根据所选故障设备获取" />
        </px-form-item>
      </px-col>
      <px-col :span="8">
        <px-form-item label="设备位置" :prop="[...itemProps, 'positionCodeDesc']" label-width="120px">
          <px-input v-model="formValue.positionCodeDesc" disabled placeholder="根据所选故障设备获取" />
        </px-form-item>
      </px-col>
      <px-col :span="24">
        <px-form-item
          :rules="[{ required: true, message: '问题描述不能为空', trigger: ['change', 'blur'] }]"
          label="问题描述"
          :prop="[...itemProps, 'faultDesc']"
          label-width="120px"
        >
          <px-input
            v-model="formValue.faultDesc"
            type="textarea"
            placeholder="请输入问题描述"
            :autosize="{ minRows: 2, maxRows: 4 }"
            maxlength="1000"
            clearable
          />
        </px-form-item>
      </px-col>
      <px-col :span="24">
        <px-form-item label="图片上传" :prop="[...itemProps, 'faultImageList']" label-width="120px">
          <PhotoUpload
            :photoType="photoType"
            :photoData="{ moduleName: moduleName }"
            :photoList="formValue.faultImageList"
            style="margin-bottom: 18px"
            @changePhotoList="changePhotoList"
            @savePhotoStatus="savePhotoStatus"
          />
        </px-form-item>
      </px-col>
    </px-row>
    <!-- </px-form> -->
  </div>
</template>
<script setup lang="ts">
import { getWorkOrderCode } from "@/api/erc/maintain";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { computed, onMounted, reactive, toRefs } from "vue";
// 父级传过来的值
const props = defineProps(["visible", "shareData", "eqpId", "itemProps", "moduleName", "approvalList"]);
const formValue: any = defineModel();
const state = reactive<any>({
  photoType: "add",
  photoStatusFlag: false,
  executorInfoList: [] // 运维组列表
});
const { photoType, photoStatusFlag, executorInfoList } = toRefs(state);
const customApprovalList = computed(() => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  const arr = props.approvalList.filter(item => {
    return item.userId !== userInfo.userId;
  });
  return arr;
});
// 获取后端自动生成的工单号
const getToolCode = async () => {
  const data = await getWorkOrderCode();
  formValue.value.workOrderCode = data;
};

const disabledStartDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7;
};

// 获取借用人的名字
const approvalIdChange = val => {
  const arr = props.approvalList.filter(item => item.value === val);

  if (arr && arr.length > 0) {
    formValue.value.approverName = arr[0].label;
  }
};

// 执行人多选
const executorIdChange = val => {
  const arr = props.approvalList.filter(item => val.some(id => item.value === id));
  if (arr && arr.length > 0) {
    executorInfoList.value = arr.map(item => ({ executorId: item.value, executorName: item.label }));
    formValue.value.customExecutorInfoList = executorInfoList.value;
  }
};
onMounted(() => {
  const { planStartTime, planEndTime, executorInfoList } = formValue.value;
  formValue.value.time = planStartTime && planEndTime ? [planStartTime, planEndTime] : [];
  formValue.value.executorInfoList = executorInfoList ? executorInfoList.map(item => item.executorId) : [];
  formValue.value.customExecutorInfoList = executorInfoList?.length ? executorInfoList : [];

  if (props.visible && !formValue.value?.workOrderCode) {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    formValue.value.createName = userInfo.realName;
    formValue.value.createBy = userInfo.userId;
    formValue.value.createMode = "PC端发起";
    getToolCode();
    photoType.value = "add";
  }
});
// 监视isMain和isView值
// watch(
//   () => [props.visible, formValue.value?.workOrderCode],
//   async () => {
//     if (props.visible && !formValue.value?.workOrderCode) {
//       const userInfo = JSON.parse(localStorage.getItem("userInfo"));
//       formValue.value.createName = userInfo.realName;
//       formValue.value.createBy = userInfo.userId;
//       formValue.value.createMode = "PC端发起";
//       getToolCode();
//       photoType.value = "add";
//     }
//   }
// );
// 新的图片列表
const changePhotoList = val => {
  formValue.value.faultImageList = val;
};
// 图片是否上传完，是否可以保存
const savePhotoStatus = val => {
  photoStatusFlag.value = val;
};
</script>
<style lang="scss" scoped>
.px-form {
  width: 100%;

  .px-form-item {
    width: 100%;
    margin-right: 0;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;

      .px-select-v2__wrapper {
        cursor: pointer;
      }
    }

    .px-input-number {
      width: 100%;

      .px-input__inner {
        text-align: left;
      }
    }

    &.is-error {
      .px-input-number {
        .px-input__wrapper {
          border: 1px solid var(--px-color-danger);
          box-shadow: none;
        }
      }
    }
  }
}
</style>
